<template>
  <el-dialog :lock-scroll="false" title="解决问题" :visible.sync="visible" width="750px">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" :validate-on-rule-change="false">
      <el-form-item label="分类" prop="category">
        <el-select v-model="form.category" placeholder="请选择">
          <el-option
            v-for="item in category"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="解决时间" prop="resolve_date">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="form.resolve_date"
          type="datetime"
          placeholder="选择日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="问题解决人" prop="user_ids">
        <PrincipalSelect ref="principalSelectRef" :limit="true" placeholder="请选择问题解决人" v-model="form.user_ids"/>
      </el-form-item>

      <el-form-item label="问题原因分析" prop="reason">
        <el-input v-model.trim="form.reason" placeholder="请输入问题原因分析" :rows="4" type="textarea"/>
      </el-form-item>
      <el-form-item label="解决方案">
        <el-input v-model.trim="form.scheme" placeholder="请输入解决方案" :rows="4" type="textarea"/>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model.trim="form.description" placeholder="请输入备注" :rows="4" type="textarea" maxlength="200"
                  show-word-limit/>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="onCancel()">取消</el-button>
      <el-button :loading="loading" type="primary" @click="onSave()">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import PrincipalSelect from "@/views/project/task/components/PrincipalSelect.vue";
export default {
  props: ['category'],
  components:{PrincipalSelect},
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() >= Date.now();
        }
      },
      id:null,
      loading: false,
      visible: false,
      form: {
        reason:null,
        user_ids:[],
        category:null,
        scheme:null,
        description: null,
        resolve_date:null
      },
      rules: {
        category: [{ required: true, message: '请选择问题分类', trigger: 'change' }],
        resolve_date: [{ required: true, message: '请选择解决时间', trigger: 'change' }],
        user_ids: [{ required: true, message: '请选择问题解决人', trigger: 'change' }],
      },
      options: [],
    }
  },
  methods: {
    onSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http.post(`/suggests/${this.id}/resolve`,this.form).then((res) => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$emit('reload')
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            this.onCancel()
          })
        } else {
          return false;
        }
      });
    },
    onCancel() {
      this.visible=false
      this.$refs.form.resetFields()
    },
  }
}
</script>
